<template>
	<view>
		<!-- 导航栏组件 -->
		<navBar :searchShow="true" />

		<!-- #ifdef H5 -->
		<view :style="{height:'120rpx'}">
		</view>
		<!-- #endif -->


		<!-- 轮播图组件 -->
		<slideShow :swiperList="swiperList" :bgUrl="bgUrl" :autoplay="autoplay" :interval="interval" @click="click" />

		<!-- 壁纸主题组件 -->
		<view class="theme">
			<view class="theme-text">
				<h4>随机壁纸主题</h4>
				<view>
					<button @tap="tapEntire()" class="entire">
						<p>查看全部</p>
						<text class="entire-icon iconfont icon-jinru"></text>
					</button>
				</view>
			</view>
			<!-- 横向滚动 -->
			<scroll-view scroll-x="true">
				<wallpaperTheme :scrollX="true" />
			</scroll-view>
		</view>

		<!-- QQ推荐 -->
		<view class="recommend">
			<view class="QQ">
				<h4>QQ推荐</h4>
			</view>
			<!-- 交错式瀑布流组件 -->
			<waterfallFlow :list="waterfallList"></waterfallFlow>
		</view>

		<view v-show="loadingShow" class="loading">
			<div class="loader">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</view>

		<!-- 返回顶部 -->
		<view v-show="backTopShow" @tap="backTop()" class="back-top">
			<text class="iconfont icon-fanhuidingbu"></text>
		</view>

		<view class="bottom-empty">

		</view>

		<!-- 底部导航栏 -->
		<tabBar pagePath="pages/index/index"></tabBar>
	</view>
</template>

<script>
	import slideShow from './components/slideShow.vue'
	// 壁纸主题组件
	import wallpaperTheme from './components/wallpaperTheme.vue'

	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			slideShow,
			wallpaperTheme,
		},
		data() {
			return {
				autoplay: true,
				interval: 2500,
				bgUrl: "https://snowcyans.gitee.io/static-warehouse/static/tk4.jpg",
				// 加载动画是否显示
				loadingShow: false,
				scrollTop: 0,
				// 返回顶部图标是否显示
				backTopShow: false,
			}
		},
		onLoad() {
			uni.hideTabBar();
			
		},
		methods: {
			//预览壁纸
			click(item) {
				uni.navigateTo({
					url:'/pages/preView/preView',
					success(res) {
						res.eventChannel.emit('imgData', item)
					}
				})
			},
			// 查看全部
			tapEntire() {
				uni.navigateTo({
					url:'/pages/topic/topic'
				})
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		},
		onReachBottom() {
			this.loadingShow = true
			// 模拟触底刷新
			setTimeout(() => {
				// 每次触底调用mutations给瀑布流数据赋值
				this.$store.commit('home/waterfallAdd', this.loadingList)
				this.loadingShow = false
			}, 500)
		},
		// 页面滚动距离
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// 页面滚动距离大于600显示返回顶部图标
			if (e.scrollTop >= 600) {
				this.backTopShow = true
			} else {
				this.backTopShow = false
			}
		},
		computed: {
			...mapState('home', ['swiperList', 'waterfallList', 'loadingList']),
			...mapState('category',['categoryList'])
		}
	}
</script>

<style lang="scss">
	// 壁纸主题
	.theme {
		margin-top: 30rpx;

		.theme-text {
			height: 50rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 40rpx 30rpx;

			view {
				display: flex;

				p {
					font-size: 26rpx;
				}

				text {
					font-size: 20rpx;
					color: #fff;
				}
			}

			// 查看全部
			.entire {
				width: 220rpx;
				height: 70rpx;
				border-radius: 50rpx;
				border: 1rpx solid #8c8e8c;
				background-color: #222222;
				display: flex;
				align-items: center;
				justify-content: center;

				p {
					color: #dee1e6;
					margin-right: 55rpx;
				}
			}

			.entire-icon {
				position: absolute;
				top: 4rpx;
				right: 5rpx;
				width: 60rpx;
				height: 60rpx;
				background: linear-gradient(#fe7598, #b34cff);
				border-radius: 50%;
				line-height: 60rpx;
			}

			// 点击按钮
			.entire:active {
				transform: scale(0.95);
				transition-duration: .3s;
			}

		}
	}

	// QQ推荐
	.recommend {
		margin-top: 30rpx;

		.QQ {
			padding: 20rpx 0 30rpx 30rpx;
		}
	}

	// 加载中
	.loading {
		position: fixed;
		bottom: 13%;
		left: 50%;
		transform: translate(-50%);

		.loader {
			position: relative;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background: linear-gradient(#ee280e, #15a0f7, #6ed15a);
			animation: animate7712 1.2s linear infinite;
		}

		@keyframes animate7712 {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.loader span {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: linear-gradient(#ee280e, #15a0f7, #5ad15a);
		}

		.loader:after {
			content: '';
			position: absolute;
			top: 7rpx;
			left: 7rpx;
			right: 7rpx;
			bottom: 7rpx;
			background: #333;
			border: solid #333 7rpx;
			border-radius: 50%;
		}

		.loader span:nth-child(1) {
			filter: blur(5rpx);
		}

		.loader span:nth-child(2) {
			filter: blur(10rpx);
		}

		.loader span:nth-child(3) {
			filter: blur(25rpx);
		}

		.loader span:nth-child(4) {
			filter: blur(50rpx);
		}
	}


	// 返回顶部
	.back-top {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		transition: 2s;
		text-align: center;
		position: fixed;
		z-index: 999;
		bottom: 150rpx;
		right: 50rpx;
		background-color: #282c35;

		text {
			font-size: 50rpx;
			color: #24bfa5;
		}
	}

	.bottom-empty {
		width: 100%;
		height: 180rpx;
	}
</style>